<!DOCTYPE html>
<html>
<head>
	<title>数字华容道</title>
	<meta charset="utf-8">
<style type="text/css">
.item {width: 360px;height: auto;overflow: hidden;}
.item div {width: 100px;height: 100px;float: left;background: green;margin: 5px;text-align: center;line-height: 100px;font-size: 30px;color: #FFF;}
</style>
</head>
<body>
<div style="width: 600px;overflow: hidden;">
	
	<div class="item">
		<div id="div0" onclick="move(0);"></div>
		<div id="div1" onclick="move(1);"></div>
		<div id="div2" onclick="move(2);"></div>
	</div>
	<div class="item">
		<div id="div3" onclick="move(3);"></div>
		<div id="div4" onclick="move(4);"></div>
		<div id="div5" onclick="move(5);"></div>
	</div>
	<div class="item">
		<div id="div6" onclick="move(6);"></div>
		<div id="div7" onclick="move(7);"></div>
		<div id="div8" onclick="move(8);"></div>
	</div>
</div>


<script type="text/javascript">
var arr = [];
var debug = false;
for( var i = 1; i < 10; i++ ) {
	arr.push(i);
}

//报数，

//1,2,3,4,5,6,7,8,9 
//0 <=> 4
//5
//5,2,3,4,1,6,7,8,9
//1
//2,5,3,4,1,6,7,8,9

//报数==产生的随机数
for( var i = 0; i < arr.length; i++ ) {
	var random = Math.random() * 9;
	random = Math.floor(random);
	var temp = arr[i];
	arr[i] = arr[random];
	arr[random] = temp;
}
var kongge = "";
for( var i = 0; i < arr.length; i++ ) {
	var obj = document.getElementById('div'+i);
	if ( arr[i] == 9 ) {
		kongge = i;
		obj.innerHTML = '';
	} else {
		obj.innerHTML = arr[i];
	}
}
function move( num ) {
	var kObj = document.getElementById('div'+kongge);
	var mObj = document.getElementById('div'+num);
	//移动的条件, 差为1 或者 3
	//越墙问题?
	//什么时候成功？怎么判断?
	var idx = Math.abs(num - kongge);
	var a = (kongge % 3);
	var b = (num % 3 );
	var c =Math.abs( a - b );
	if ( (idx == 1 || idx == 3) || debug ) {
		if ( c == 2 && idx == 1 ) {

		} else {
			kObj.innerHTML = mObj.innerHTML;
			mObj.innerHTML = "";
			kongge = num;
			if ( check() )
			{
				alert("太聪明了!");
			}
		}
	}
}
function check() {
	for( var i = 0; i < arr.length - 1;i++ ) {
		var obj = document.getElementById('div'+i);
		var num = obj.innerHTML;
		if ( num != (i + 1) ) {
			return false;
			break;
		}
	}
	return true;
}

//随机数-伪随机
var random = Math.random(); //0~1之间随机数
var num1 = random * 9 + 1;
//Math.ceil()向上取整
num1 = Math.floor(num1);  //向下取整
//console.log(num1);
//通过id 获取dom对象
// function move(a) {
// 	var obj = document.getElementById('div1');
// 	//alert(obj);
// 	//获取元素上的html内容
// 	//var num = obj.innerHTML;
// 	//alert(a);
// 	//赋值
// 	//obj.innerHTML = 2222;
// }
// 1. 九宫格
// 2. 随机赋值 1-9
// 3. 将 9 变为空格
// 4. 点击空格边上的数字与空格进行交换
// 5. 判断是否成功

</script>
</body>
</html>